<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
            --danger-color: #f72585;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .login-container {
            background-color: white;
            width: 100%;
            max-width: 420px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
        }
        
        .login-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        .login-header h1 {
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .login-header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .login-body {
            padding: 25px;
        }
        
        .tab-container {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            font-weight: 500;
            color: #666;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--dark-color);
            font-weight: 500;
        }
        
        .input-group {
            position: relative;
        }
        
        .input-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 14px;
            transition: border 0.3s ease;
        }
        
        .input-group input:focus {
            border-color: var(--primary-color);
            outline: none;
        }
        
        .input-group i {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
        }
        
        .btn-sms {
            position: absolute;
            right: 5px;
            top: 9px;
            padding: 5px 10px;
            background-color: var(--success-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .btn-sms:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .login-footer {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }
        
        .login-footer a {
            color: var(--primary-color);
            text-decoration: none;
            margin: 0 5px;
        }
        
        .login-footer a:hover {
            text-decoration: underline;
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 20px 0;
            color: #999;
            font-size: 14px;
        }
        
        .divider::before, .divider::after {
            content: "";
            flex: 1;
            border-bottom: 1px solid #eee;
        }
        
        .divider::before {
            margin-right: 10px;
        }
        
        .divider::after {
            margin-left: 10px;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .social-btn:hover {
            transform: translateY(-3px);
        }
        
        .wechat {
            background-color: #09b83e;
        }
        
        .weibo {
            background-color: #e6162d;
        }
        
        .qq {
            background-color: #12b7f5;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>欢迎登录</h1>
            <p>请选择您的登录方式</p>
        </div>
        
        <div class="login-body">
            <div class="tab-container">
                <div class="tab active" data-tab="account">账号登录</div>
                <div class="tab" data-tab="sms">短信登录</div>
            </div>
            
            <div id="account" class="tab-content active">
                <form id="account-form">
                    <div class="form-group">
                        <label for="username">用户名/邮箱</label>
                        <div class="input-group">
                            <input type="text" id="username" placeholder="请输入用户名或邮箱" required>
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-group">
                            <input type="password" id="password" placeholder="请输入密码" required>
                            <i class="fas fa-lock"></i>
                        </div>
                    </div>
                    
                    <!-- <div class="form-group">
                        <div class="input-group">
                            <input type="checkbox" id="remember">
                            <label for="remember" style="display: inline; margin-left: 5px;">记住我</label>
                        </div>
                    </div> -->
                    
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
            </div>
            
            <div id="sms" class="tab-content">
                <form id="sms-form">
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <div class="input-group">
                            <input type="tel" id="phone" placeholder="请输入手机号码" required>
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="sms-code">验证码</label>
                        <div class="input-group" style="position: relative;">
                            <input type="text" id="sms-code" placeholder="请输入验证码" required>
                            <button type="button" class="btn-sms" id="send-sms">获取验证码</button>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
            </div>
            
            <div class="divider">或</div>
            
            <div class="social-login">
                <div class="social-btn wechat">
                    <i class="fab fa-weixin"></i>
                </div>
                <div class="social-btn weibo">
                    <i class="fab fa-weibo"></i>
                </div>
                <div class="social-btn qq">
                    <i class="fab fa-qq"></i>
                </div>
            </div>
            
            <div class="login-footer">
                <a href="#" id="forgot-password">忘记密码</a>
                <span>|</span>
                <a href="#" id="register-account">注册账号</a>
                <span>|</span>
                <a href="#" id="help-center">帮助中心</a>
            </div>
        </div>
    </div>

    
    

    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script src="/configfile/config.js"></script>
    <script src="/script/token.js"></script>
    <script type="module">
        //环境变量初始化
        //获取导航的a标签，并设置href
        const forgotPassword = document.querySelector('#forgot-password'); // 忘记密码
        const registerAccount = document.querySelector('#register-account'); // 注册账号
        const helpCenter = document.querySelector('#help-center'); // 帮助中心
        
        
        
        let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
        let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
        let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
        let user_ip = window.__ENV__.USER_SERVER_IP;//个人中心
        forgotPassword.href = "#";
        registerAccount.href = user_ip + "/registershow";
        helpCenter.href = "#";


        // 切换登录方式
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有active类
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                
                // 添加active类到当前tab
                tab.classList.add('active');
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 发送验证码
        const sendSmsBtn = document.getElementById('send-sms');
        sendSmsBtn.addEventListener('click', () => {
            const phone = document.getElementById('phone').value;
            if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号码');
                return;
            }
            
            // 倒计时
            let countdown = 60;
            sendSmsBtn.disabled = true;
            sendSmsBtn.textContent = `${countdown}秒后重试`;
            
            const timer = setInterval(() => {
                countdown--;
                sendSmsBtn.textContent = `${countdown}秒后重试`;
                
                if (countdown <= 0) {
                    clearInterval(timer);
                    sendSmsBtn.disabled = false;
                    sendSmsBtn.textContent = '获取验证码';
                }
            }, 1000);
            
            // 这里应该发送AJAX请求获取验证码
            console.log(`发送验证码到手机: ${phone}`);
        });
        
        // 表单提交
        //账号密码登录
        let accountform = document.getElementById('account-form');
        accountform.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 这里应该发送登录请求
            let loginData = {
                Useraccount: username,
                Userpassword: password
            }
            try {
                axios
                    .post(
                        user_ip+"/login",
                        loginData
                    )
                    .then((res) => {
                        //判断后端的报错信息。如果存在则保存失败
                        // console.log(res.data);
                        if(res.data.message.success){
                            // 存储令牌
                            localStorage.setItem('token', res.data.message.data);
                            window.location.href = home_ip;
                        }else{
                            alert("登录失败");
                        }
                        
                    })
                    .catch(err => {
                        console.log(err);
                    });

            } catch (err) {
                console.error('登录失败:', err);
            }
        });
        
        //短信登录
        document.getElementById('sms-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const phone = document.getElementById('phone').value;
            const smsCode = document.getElementById('sms-code').value;
            console.log('短信登录:', { phone, smsCode });
            // 这里应该发送登录请求
            alert('短信登录功能待实现');
        });


    </script>
</body>
</html>